<template lang="html">
    <div class="scheduling-check">
        <nav-header>
        <li><router-link to="/teaching/scheduling/scheduling-apply">审核列表</router-link><li>
        <li class="gap">&gt;</li>
        <li>详情</li>
        </nav-header>
        <el-form ref="form" :model="form" label-width="90px" v-loading="dataLoading.status" :element-loading-text="dataLoading.txt">
            <el-form-item label="直播时间*" class="item-star">
                <el-col :span="8">
                <el-date-picker type="date" :readonly="true" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="1" style="text-align: center;">-</el-col>
                <el-col :span="7">
                <el-time-picker type="fixed-time" :readonly="true" value-format="hh:mm:ss" v-model="form.ftime" style="width: 100%;"></el-time-picker>
                </el-col>
                <el-col class="line" :span="1" style="text-align: center;">-</el-col>
                <el-col :span="7">
                <el-time-picker type="fixed-time" :readonly="true" value-format="hh:mm:ss" v-model="form.ltime" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="公开课名称*" class="item-star">
                <el-input v-model="form.name" :readonly="true"></el-input>
            </el-form-item>
            <div class="form-item">
                <el-form-item label="授课教师*" class="item-star">
                <el-input v-model="form.create_name" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="直播设备*" class="item-star">
                <el-input v-model="form.recorder_name" :readonly="true"></el-input>
                </el-form-item>
            </div>
            <div class="form-item">
                <el-form-item label="所属学校*" class="item-star">
                <el-input v-model="form.school_name" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="学段*" class="item-star">
                <el-input v-model="form.study_section_name" :readonly="true"></el-input>
                </el-form-item>
            </div>
            <div class="form-item">
                <el-form-item label="年级*" class="item-star">
                <el-input v-model="form.grade_name" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="科目*" class="item-star">
                <el-input v-model="form.subject_name" :readonly="true"></el-input>
                </el-form-item>
            </div>
            <div class="form-item">
                <el-form-item label="课型*">
                <el-input v-model="form.teaching_type" :readonly="true"></el-input>
                </el-form-item>
            </div>
            <el-form-item label="课程简介">
                <el-input v-model="form.profile" :readonly="true"></el-input>
            </el-form-item>
            <!-- <el-form-item label="封面图片" v-show="form.picture">
                <div class="form-cover">
                <img :src="BASE_URL+form.picture">
                </div>
            </el-form-item> -->
            <el-form-item label="是否录制">
                <el-radio-group v-model="form.is_record">
                <el-radio :label="1">录制</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="">
                <el-button v-if="this.form.status !== 2" type="text" @click="checkSource">查看附件</el-button>
            </div>
            <div class="btn-box" v-if="type === 'check' && form.status == 2">
                <el-button type="primary" @click="checkPass(1)">通过</el-button>
                <el-button type="danger" @click="rejectShow">拒绝</el-button>
            </div>
            </el-form>
            <div class="status-box" v-if="type === 'details'">
            <div class="status-item" v-if="form.status === 1">
                <div class="status-item-icon">
                <img src="/static/image/teaching/10.png" alt="">
                </div>
            </div>
            <div class="status-item" v-else-if="form.status === 3">
                <div class="status-item-icon">
                <img src="/static/image/teaching/11.png" alt="">
                </div>
                <div class="status-item-text" v-text="form.comment"></div>
            </div>
            <div class="status-item" v-else-if="form.live_status === 4 && form.status === 2">
                <div class="status-item-icon">
                <img src="/static/image/teaching/12.png" alt="">
                </div>
                <div class="status-item-text"> 到期没有审核 </div>
            </div>
        </div>
        <el-dialog
        title="拒绝"
        :visible.sync="rejectWrite"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        :before-close="rejectHide"
        width="40%"
        >
        <div class="textarea-box">
            <el-form :model="rejectForm"  ref="rejectForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="拒绝理由" prop="rejectTxtWrite" :rules="[{required: true,message: '请填写拒绝理由',validator: checkValue}]">
                <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.rejectTxtWrite" :maxlength="100" required></el-input>
            </el-form-item>
            </el-form>
            <p class="str-num"><span :class="{'str-max' : rejectForm.rejectTxtWrite.length >= 100}" v-text="rejectForm.rejectTxtWrite.length"></span>/<span class="str-max">100</span></p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectHide">取 消</el-button>
            <el-button type="primary" @click="reject">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 查看附件begin -->
        <el-dialog
        title="查看附件"
        :visible.sync="accessoryFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="50%"
        >
        <ul class="textarea-box">
            <li v-for="(src,srcInx) in sourceList" class="viewAttachment">
                <div class="acc-name">
                <span v-text="src.name + '.' + src.postfix">附件名称.png</span>
                </div>
                <div class="acc-r">
                <el-button type="text" @click="viewResource(src)">预览</el-button>
                <el-button type="text" @click="down(src.id)">下载</el-button>
                <el-button type="text" class="delete-button" @click="delete_confirm(src)">删除</el-button>
                </div>
            </li>
        </ul>
        </el-dialog>
        <!-- 查看附件end -->
        <transition name="el-fade-in-linear" >
                <div class="masking" :class="{ activeLive: isActive }">
                    <div class="maskingBox"
                        v-loading="viewLoading.status"
                        :element-loading-text="viewLoading.txt"
                    >
                        <div class="masking_h">
                            <span>视频预览</span>
                            <i class="el-icon-close" @click="viewClose"></i>
                        </div>
                        <div class="masking_c">
                            <nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
                            </nativeVideo>
                        </div>
                    </div>
                </div>
            </transition>
            <transition name="el-fade-in-linear" lock-scroll="false" >
                <div class="masking" :class="{ activeLive: isPDFActive }">
                    <div class="maskingBox">
                        <div class="masking_h">
                            <span>文档预览</span>
                            <i class="el-icon-close" @click="viewPDFClose"></i>
                        </div>
                        <div class="masking-document">
                            <div class="pdf-View">
                                <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            
            <image-viewer
                v-if="imagePreview.showViewer"
                :initial-index="imageIndex"
                :on-close="closeViewer"
                :url-list="imagePreview.previewSrcList">
            </image-viewer>

            <el-dialog
                title="音频预览"
                :visible.sync="voiceVisible"
                width="auto"
                style="min-width:550px;"
                top="0"
                custom-class="imgVisible"
                :close-on-click-modal="false"
                :before-close="closeAudio">
                <div class="imgViewx">
                    <audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
                    Your browser does not support the audio tag.
                    </audio>
                </div>
            </el-dialog>
    </div>
</template>

<script>
import nativeVideo from '../../public/nativeVideo'

    export default {
        data() {
            return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
                dataLoading:{
                    status:false,
                    txt:'获取数据...'
                },
                type: this.$route.query.type,
                rejectObj: null,/*拒绝对象 */
                rejectWrite: false,/*拒绝弹窗 */
                rejectForm: {/*拒绝表单 */
                    rejectTxtWrite: '',/*拒绝理由填写 */
                },
                form: {},
                accessoryFlag: false,
                sourceList: [],
                isActive: true,
                isPDFActive: true,
                viwPdfParam:{
                    src:'',
                    loadedRatio: 0,
                    page: 1,
                    numPages: 0,
                    rotate: 0,
                },
                imgVisible: false,
                imgViewUrl:'',
                voiceVisible:false,
                voiceViewUrl:'',
                viewLoading:{
                    status:false,
                    txt:'加载数据...'
                },
                showVideoPlayer:false,
                playParam:{
                    play_url:'',
                },
            }
        },
    created() {
        this.getDetails()
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
        getDetails() {
        this.dataLoading.status = true;
        let params = {
            id: this.$route.query.id,
        }
        const success = res => {
            let [date,ftime] = res.data.start_time.split(' ');
            let teaching_type = ''
            if(Object.is(res.data.teaching_type,1)) {
                teaching_type = '新授课';
            }
            if(Object.is(res.data.teaching_type,2)) {
                teaching_type = '复习课';
            }
            if(Object.is(res.data.teaching_type,3)) {
            teaching_type = '讲评课';
            }
            if(Object.is(res.data.teaching_type,4)) {
                teaching_type = '主题活动课';
            }
            this.form = Object.assign({},res.data, {
            date1: date,
            ftime: ftime,
            ltime: res.data.end_time.split(' ')[1],
            teaching_type: teaching_type,
            })
            this.dataLoading.status = false;
        }
        this.$ajax.get('api/teachingschedule/schedule_info',{params: params, func: {success: success}})
        },
        checkSource() {
        this.getsource();
        },
        getsource() {
        let params = {
            schedule_id: this.$route.query.id,
        }
        const success = res=> {
            this.sourceList = res.data;
            if(this.sourceList.length > 0) {
            this.accessoryFlag = true;
            } else {
            this.$message.error('暂无上传附件');
            }
        }
        this.$ajax.get('api/teachingschedule/teaching_schedule_resource',{params: params, func: {success: success}})
        },
        pdfPageChange(val){
                    this.viwPdfParam.page  = val;
                },
                error: function(err) {
                    //this.$message.error('读取文件失败');
                    
                },
        //pdf预览
                pdfView(url){
                    this.viwPdfParam.src =  (url)
                    // this.viwPdfParam.src =  pdf.createLoadingTask(url)
                },
                viewPDFClose(){
                    this.isPDFActive = true
        },
        /**
         * 查看图片
         * @param {Object} obj 记录信息
         */
        imgView(url) {
            this.imgViewUrl = url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        //关闭视频预览
        viewClose(){
            this.showVideoPlayer = false;
            this.isActive = true
    
        },
        //视频预览
        videoView(url) {
            this.showVideoPlayer = true;
            this.playParam.play_url = url;
        },
        //资源预览转发
                viewResource( obj ){
                    this.viewLoading.status = true;
                    this.accessoryFlag = false;
                    //视频预览
                    if( parseInt(obj.file_type) === 6 ){
                        this.isActive = false
                    }
                    //图片预览
                    else if( parseInt(obj.file_type) === 3 ) {
                        this.imgVisible  = true;
                    }
                    //文档预览
                    else if( parseInt(obj.file_type) === 1 ){
                        this.isPDFActive = false
                    }
                    //音频预览
                    else if( parseInt( obj.file_type ) === 5 ){
                        this.voiceVisible = true;
                    }else{
                        this.$message.warning("不支持预览的资源类型")
                        return false;
                    }
                    let success = ( data => {
                        var result  = data.data;
                        //视频预览
                        if( parseInt(result.file_type) === 6 ){
                            this.videoView(result.path);
                        }
                        //图片预览
                        else if( parseInt(result.file_type) === 3 ) {
                            this.imgView(result.path);
                        }
                        //文档预览
                        else if( parseInt(result.file_type) === 1 ){
                            this.pdfView( result.path);
                        }
                        //音频预览
                        else if( parseInt( result.file_type ) === 5 ){
                            this.voiceView(result.path)
                            //this.$message.warning("不支持预览的资源类型")
                        }else{
                            this.$message.warning("不支持预览的资源类型")
                        }
                    })
                    let fail = (data => {
                        this.viewLoading.status = false;
                        this.$message.error(data.msg)
                    })
                    this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_teaching_resource:1},func:{success:success,fail:fail}})
        },
        down(id){
            var form = document.createElement("form");
            form.action = this.BASE_URL+'/index/resource/teaching_schedule_resource_download';
            form.method = 'post';
            form.style.display = "none";
            var opt_id = document.createElement("textarea");
            opt_id.name = 'id';
            opt_id.value = id;
            form.appendChild(opt_id);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },
        delete_confirm(obj){
                    let yes = ( data => {
            this.delete(obj.id,0);
            this.accessoryFlag = false;
                    })
                    let cancel = ( data => {})
                    this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
        },
        delete(id,status){
                let success = ( data => {
            this.$message.success(data.msg)
                    });
                    this.$ajax.delete('api/teachingschedule/manage_schedule_resource',{params:{schedule_id:this.$route.params.id,id:id},func:{success:success}})
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
                callback(new Error("请输入有效值"));
            }else {
                callback();
            }
        },
        rejectShow(obj) {
            this.rejectWrite = true;
        },
        rejectHide() {
            this.$refs.rejectForm.clearValidate();
            this.rejectWrite = false;
            this.rejectForm.rejectTxtWrite = '';
        },
        reject() {
            this.$refs[`rejectForm`].validate(valid => {
            if (valid) {
                this.checkPass(3);
            } else {
                return;
            }
            })
        },
        checkPass(type) {
            this.dataLoading.status = true;
            let params = {
                schedule_id: this.$route.query.id,
                status: type,
            }

            if(Object.is(type,3)) {
                params = Object.assign({}, params, {
                    comment: this.rejectForm.rejectTxtWrite,
                })
            }

            const success=res=>{
                // this.dataLoading.status = false;
                // if(Object.is(type,3)) {
                //     this.rejectHide();
                // }
                // this.getDetails();
                this.$router.push('/teaching/scheduling/scheduling-apply');
            }
            const fail = res => {
                this.dataLoading.status = false;
                this.$message.error({message: res.msg});
            }

            this.$ajax.post('api/teachingschedule/teaching_schedule_auth', params, {func:{success:success, fail: fail}})
        },
    },
    components: {
            // pdf,
            nativeVideo
        }
    }
</script>

<style lang="scss">
    .scheduling-check {
    .el-form {
        width: 730px;
        .el-form-item__label {
        text-align: left;
        }
        .item-star {
        .el-form-item__label {
            position: relative;
            // &::after {
            //   display: inline-block;
            //   content: '*';
            //   color: red;
            // }
        }
        }
        .form-item {
        position: relative;
        display: flex;
        .item-star:nth-of-type(2) {
            position: absolute;
            right: 0;
        }
        .el-input--small .el-input__inner {
            width: 260px;
        }
        }
    }
    .btn-box {
        margin-top: 25px;
        button {
        padding: 8px 35px;
        }
    }
    .status-box {
        position: fixed;
        width: 150px;
        text-align: center;
        right: 0;
        top: 158px;
    }
    .textarea-box {
        position: relative;
        overflow: auto;

        .viewAttachment {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding-bottom: 20px;
        }

        .el-form {
        width: 100%;
        }
        .el-textarea__inner {
        min-height: 150px !important;
        resize: none;
        }
        .str-num {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        bottom: 0;
        right: 2px;
        text-align: right;
        .str-max {
            color: #ddd;
        }
        }
    }
    .el-table__body-wrapper table tbody {
                td:nth-child(8) {
                    padding: 0;
                }
            }
            .masking{
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: .5s;
                background: rgba(0,0,0,.3);
                z-index: 4;
                .maskingBox{
                    position: absolute;
                    top: 15%;
                    left: 50%;
                    width: 800px;
                    margin-left: -400px;
                    background: #fff;
                }
                .masking_h{
                    padding: 10px 15px;
                    background: #348EFC;
                    text-align: center;
                    text-align-last: justify;
                    >span,
                    >i{
                        font-size: 16px;
                        text-align-last: initial;
                        display: inline-block;
                        vertical-align: middle;
                        color: #fff;
                    }
                    >i{
                        cursor: pointer;
                    }
                }

            }

            .masking_c{
                .el-pagination{
                    padding-bottom: 20px;
                }
            }

            .activeLive{
                opacity: 0;
                visibility: hidden;
            }

            .imgVisible{
                display: inline-block;
                vertical-align: middle;
                background: none;
                text-align: left;
                min-width: 550px;
                min-height: 550px;
                background: rgba(109, 116, 125, 0.78);
                margin: 0;
                .el-dialog__header{
                    // display: none;
                }
                .el-dialog__body{
                    text-align: center;
                    padding: 0;
                    img{
                        max-width: 100%;
                    }
                }
            }
            .el-dialog__wrapper{
                text-align: center;
            }
    }
</style>
